//引入gulp
const gulp = require("gulp");
//引入压缩html的插件
const htmlmin = require("gulp-htmlmin");
//引入less转css
const less = require("gulp-less");
//引入 Css压缩
//css插件1  gulp-csso
//插件2  gulp-clean-css
const cssmin = require("gulp-csso");
//引入兼容前缀
const autocss = require("gulp-autoprefixer");
//引入跨端口的模块
//引入Babel转码ES6,引入uglify压缩js
const babel = require("gulp-babel");
const jsmin = require("gulp-uglify");
//引入del模块
const del = require("del");
// 引入sass模块
const sass = require("gulp-sass");
//引入connect
const connect = require("gulp-connect");
const proxy = require("http-proxy-middleware");
//建立任务  压缩html
gulp.task("htmlmin", () => {
  return gulp
    .src("src/html/**/*.html")
    .pipe(
      htmlmin({
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: false, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true, //压缩页面JS
        minifyCSS: true //压缩页面CSS
      })
    )
    .pipe(gulp.dest("dist/html"))
    .pipe(connect.reload());
});
//建立任务 转码less  压缩css
gulp.task("cssmin", () => {
  return gulp
    .src(["src/css/**/*.scss", "src/css/**/*.css"])
    .pipe(sass())
    .pipe(cssmin())
    .pipe(autocss())
    .pipe(gulp.dest("dist/css"))
    .pipe(connect.reload());
});
//建立任务 ES6转5  并压缩
gulp.task("jsmin", () => {
  return gulp
    .src("src/js/**/*.js")
    .pipe(
      babel({
        //需要加参数 不然不会转码  压缩会报错
        presets: ["@babel/env"]
      })
    )
    .pipe(jsmin())
    .pipe(gulp.dest("dist/js"))
    .pipe(connect.reload());
});
//移动img
gulp.task("images", () => {
  return gulp.src("src/images/**/*").pipe(gulp.dest("dist/images"));
});
//单独压缩index.html
gulp.task("index", () => {
  return gulp
    .src("src/index.html")
    .pipe(htmlmin())
    .pipe(gulp.dest("dist"))
    .pipe(connect.reload());
});
//移动libs
gulp.task("libs", () => {
  return gulp.src("src/libs/**/*").pipe(gulp.dest("dist/libs"));
});
//启动服务器 设置端口8888
gulp.task("server", () => {
  connect.server({
    port: 8888,
    root: "dist",
    livereload: true,
    middleware () {
      return [
        // 将前端请求以/api开头的代理到80端口
        // 不存在跨域问题了
        proxy('/api', {
          target: 'http://localhost:80',
          changeOrigin: true
        })
      ]
    }
  });
});
//删除dist
gulp.task("delDist", () => {
  return del(["dist"]);
});
//建立 任务监听
gulp.task("watch", () => {
  gulp.watch("src/index.html", gulp.parallel("index")); //监听首页
  gulp.watch("src/css/**/*.scss", gulp.parallel("cssmin")); //监听css
  gulp.watch("src/html/**/*.html", gulp.parallel("htmlmin")); //监听//html
  gulp.watch("src/js/**/*.js", gulp.parallel("jsmin")); //监听js
});
//到处全部执行
gulp.task(
  "default",
  gulp.series(
    "delDist",
    gulp.parallel(
      "watch",
      "server",
      "index",
      "cssmin",
      "htmlmin",
      "jsmin",
      "libs",
      "images"
    )
  )
);
